<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <!-- 
            animate
                在绘图内部定义动画效果，可以定义多种
                attributeName
                    哪个属性要添加动画效果（例如：x表示x坐标值）
                from、to
                    起始、结束
                dur
                    持续时间
                repeatCount
                    循环次数（例如：indefinite表示无限次数，即一直重复）
         -->
        <svg width="300" height="300" style="background: cyan">
            <rect x="0" y="0" width="100" height="100">
                <animate attributeName="x" from="0" to="200" dur="2s" repeatCount="indefinite"></animate>
                <animate attributeName="y" from="0" to="200" dur="2s" repeatCount="indefinite"></animate>
                <animate attributeName="fill" from="red" to="gold" dur="2s" repeatCount="indefinite"></animate>
            </rect>
        </svg>
        <!-- 
            animateTransform
                css中animate标签的transform属性无效，若要变形，需要animateTransform标签
                from、to
                    第1个值：角度
                    第2、3个值：旋转中心
         -->
        <svg width="300" height="300" style="background: cyan">
            <rect x="0" y="0" width="50" height="50">
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    begin="0s"
                    dur="3s"
                    from="0 50 50"
                    to="360 150 150"
                    repeatCount="indefinite"></animateTransform>
            </rect>
        </svg>
    </body>
</html>
